import { createRouter, createWebHashHistory } from 'vue-router'
// import Layout from '@/views/Layout'
// 路由按需加载原理 => 默认加载的是一个函数 => 访问某个路由,执行某个页面component配置的函数时才加载路由
const Layout = () => import('@/views/Layout')
// 导入首页
// import Home from '@/views/Home'
const Home = () => import('@/views/Home')
// 导入分类页
const Category = () => import('@/views/Category')
const CategorySub = () => import('@/views/Category/sub.vue')
const Goods = () => import('@/views/Goods')

//   * 1.导入组件
//  * 2.在routes里面配置组件
//   * /
const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '/',
        component: Home,
        name: 'home',
        props: true
      },
      // 一级分类
      {
        path: '/category/:id',
        component: Category,
        name: 'category',
        props: true
      },
      // 二级分类
      {
        path: '/category/sub/:id',
        component: CategorySub,
        name: 'categorysub',
        props: true
      },
      // 详情页
      {
        path: '/goods/:id',
        component: Goods,
        name: 'goods',
        props: true
      }
    ]

  }
]
// 创建路由实例
const router = createRouter({
  // 使用hash方式实现路由
  history: createWebHashHistory(),
  // 配置路由规则，写法和之前一样
  routes,
  /** 问题:路由切换会停留在上个页面的滚动位置
   * 解决:创建路由实例的时候 加入scrollBehavior方法
   * v2写法:scrollBehavior:{x:0,y:0}
   * v写法:scrollBehavior(){top:0,left:0}
   *
   * @returns
   */
  scrollBehavior () {
    return { top: 0, left: 0 }
  }
})

export default router
